<template>
  <i :class="iconClass"></i>
</template>

<script>
import { computed } from 'vue';

export default {
  name: 'FontAwesomeIcon',
  props: {
    icon: {
      type: [String, Array], // 支持字符串或数组形式
      required: true,
    },
  },
  setup(props) {
    const iconClass = computed(() => {
      if (typeof props.icon === 'string') {
        // 如果是字符串，直接返回默认样式和图标名称
        return ['fas', props.icon];
      } else if (Array.isArray(props.icon)) {
        // 如果是数组，返回完整的类名
        return props.icon;
      }
      return [];
    });

    return {
      iconClass,
    };
  },
};
</script>

<style scoped>
/* 确保字体加载正确 */
i {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; /* 实心图标的字体权重 */
}
</style>
